<template>
  <h2>Data Property 和方法</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">防抖验证</div>
    <div  class="zhtt-demo-card-body">
      <button class="zhtt-btn" @click="clickTest()">防抖验证</button>
      <button class="zhtt-btn" @click="clickTest2()">未防抖事件</button>
      <button class="zhtt-btn" @click="debouncedClick()">防抖验证2</button>
      <p>arrs:{{arrs}}</p>
    </div>
    <div class="zhtt-demo-card-footer">
      1、在index.html中引入lodash.min.js；<br/>
      2、_.debounce()定义函数
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      arrs:[]
    }
  },
  created() {
    // 使用 Lodash 实现防抖
    this.debouncedClick = _.debounce(this.clickTest3, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods:{
    clickTest:_.debounce(function() {
      // ... 响应点击 ...
      this.arrs.push(this.arrs.length);
    }, 500),
    clickTest2(){
      this.arrs.push(this.arrs.length);
    },
    clickTest3(){
      this.arrs.push(this.arrs.length);
    }
  }
}
</script>